<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <header>
        <div class="c900 flex">
            <a href="index.html"><h1>天下行汽车租赁平台</h1></a>
            <span class="flex">
                <a href="addCar.html">添加车辆</a>
                <a><el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar></a>
                <a href="register.html">注册</a>
                <a href="login.html">登录</a>
            </span>
        </div>
    </header>
    <main class="c900 el-card">
        <div class="flex" style="align-items: stretch">
            <div class="left">
                <h3>奔驰 <small>e300</small></h3>
                <el-carousel arrow="always">
                    <el-carousel-item><img src="https://img0.baidu.com/it/u=3333009295,2802026460&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=333"></el-carousel-item>
                    <el-carousel-item><img src="https://img0.baidu.com/it/u=1863806771,481460538&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=403"></el-carousel-item>
                    <el-carousel-item><img src="https://img0.baidu.com/it/u=2259335736,48698819&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"></el-carousel-item>
                    <el-carousel-item><img src="https://img1.baidu.com/it/u=1861605608,2550716586&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"></el-carousel-item>
                </el-carousel>
                <div class="flex" style="padding-block: 20px">
                    <el-rate v-model="rate"></el-rate>
                    <div class="price">￥300<small>元/天</small></div>
                    <div class="intro">
                        <p>奔驰E300L是一款专为中国市场设计的专属座驾，其加长的轴距完全是为了满足国内用户的需求，其国产后将会提供比进口版本更具竞争力的售价。</p>
                        <p>新一代奔驰E级的轴距将加长14cm，在海外，车长4868mm的全新奔驰E级拥有2874mm的轴距（已经超出上一代20mm），如果按14cm的数值加长后将达到3014mm。</p>
                    </div>
                </div>
            </div>
            <div class="right">
                <h4 style="margin-left: 20px;margin-top: 68px">选择用车时间</h4>
                <el-calendar v-model="value">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div style="height: 100%"
                             :style="{backgroundColor: dates.find(d=>d==data.day)?'#09f':'#fff',
                                                color: dates.find(d=>d==data.day)?'#fff':data.type=='current-month'?'initial':'#ddd'}">
                            <input type="checkbox" v-model="dates" :value="data.day" :id="data.day" style="display: none">
                            <label style="font-size: 0.7em" :for="data.day"> {{ data.day.split('-')[2] }}</label>
                        </div>
                    </template>
                </el-calendar>
                <div class="flex">
                    <div class="flex price" style="margin-left: 20px">
                        <small style="color: #0a68b1">合计:</small>￥900<small>元</small>
                    </div>
                    <a href="orders.html" class="abtn">现在预订</a>
                </div>
            </div>
        </div>
        <div style="border:1px solid #e5eef8; margin: 20px">
            <h3 style="background-color: #ccccff55; padding: 20px;margin: 0px">评论</h3>
            <div class="flex" style="padding: 20px;align-items: start; border-top: 1px solid #e5eef8">
                <el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>
                <div style="flex-grow: 1; margin-left: 20px">
                    <div class="flex">
                        <span style="color: #1e50a2;">張三</span>
                        <small>1小時前</small>
                    </div>
                    <p>車子不錯...</p>
                </div>
            </div>
            <div class="flex" style="padding: 20px;align-items: start; border-top: 1px solid #e5eef8">
                <el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>
                <div style="flex-grow: 1; margin-left: 20px">
                    <div class="flex">
                        <span style="color: #1e50a2;">李四</span>
                        <small>1小時前</small>
                    </div>
                    <p>駕駛體驗很好...</p>
                </div>
            </div>
            <div class="flex" style="padding: 20px;align-items: start; border-top: 1px solid #e5eef8">
                <el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>
                <div style="flex-grow: 1; margin-left: 20px">
                    <textarea name="" id="" cols="30" rows="6" style="width: 100%"></textarea>
                    <div style="text-align: right">
                        <el-button>发表</el-button>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data: {
            value: new Date(),
            dates: [],
            rate: 4
        }
    })
</script>
</body>
</html>
